<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>我的生活</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<!-- <link rel="shortcut icon" href="css/sm.min.css"> -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.clerarfix:after {
				display: table;
				content: "";
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.box {
				background: #f2f2f2;
				width: 100%;
				height: 100%;
			}
			
			.top {
				height: 6rem;
				background: #009eff;
				text-align: center;
			}
			
			.top_net {
				display: inline-block;
				margin-top: 1rem;
				/* background:yellow; */
			}
			
			.top_net div {
				display: inline-block;
				width: 3.5rem;
				height: 3.5rem;
				border-radius: 50%;
				/* background:red; */
				background: red url(imges/touxiang.png)no-repeat center center;
				background-size: cover;
			}
			
			.top_net p {
				margin-top: 0.02rem;
				font-size: 0.7rem;
				color: white;
			}
			
			.cent {
				width: 100%;
				height: 2.8rem;
				background: white;
				margin-bottom: 0.1rem;
			}
			
			.cent1 {
				width: 9%;
				height: 55%;
				/* margin-top: 0.35rem; */
				margin-left: 1rem;
			}
			
			.bg1 {
				background: url(imges/icom7.png)no-repeat center center;
				background-size: 100%;
			}
			
			.bg2 {
				background: url(imges/icom5.png)no-repeat center center;
				background-size: 100%;
			}
			
			.bg3 {
				background: url(imges/icom6.png)no-repeat center center;
				background-size: 100%;
			}
			
			.bg4 {
				background: url(imges/icom4.png)no-repeat center center;
				background-size: 100%;
			}
			
			.bg5 {
				background: url(imges/icom3.png)no-repeat center center;
				background-size: 100%;
			}
			
			.bg6 {
				background: url(imges/icom2.png)no-repeat center center;
				background-size: 100%;
			}
			
			.bg7 {
				background: url(imges/icom1.png)no-repeat center center;
				background-size: 100%;
			}
			
			.cent2 {
				font-size: 0.8rem;
				font-weight: 500;
				margin-left: 0.6rem;
				/* margin-top: 0.45rem; */
			}
			
			.cent3 {
				color: #9c9c9c;
				margin-right: 0.6rem;
				/* margin-top: 0.6rem; */
				font-size: 0.7rem;
				padding-right: 1.5rem;
				background: url(imges/icom8.png)no-repeat right center;
			}
			
			.centn {
				margin-top: 0.6rem;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!-- 你的html代码 -->
				<nav class="bar bar-tab">
					<a class="tab-item external" href="首页.html">
						<span class="icon icon-home"></span>
						<span class="tab-label">首页</span>
					</a>

					<a class="tab-item external" href="1对1.html">
						<span class="icon icon-browser"></span>
						<span class="tab-label">1对1</span>
					</a>
					<a class="tab-item external" href="拍照搜题.html">
						<span class="icon icon-search"></span>
						<span class="tab-label">拍照</span>
					</a>
					<a class="tab-item external" href="朋友圈.html">
						<span class="icon icon-friends"></span>
						<span class="tab-label">朋友圈</span>
					</a>
					<a class="tab-item active" href="#">
						<span class="icon icon-me"></span>
						<span class="tab-label">我</span>
					</a>
				</nav>
				<div class="content">
					<!-- 这里是页面内容区 -->

					<div class="box">
						<div class="top">
							<div class="top_net">
								<div></div>
								<p>小 Kiss</p>
							</div>
						</div>
						<div class="cent clearfix">
							<div class="fl cent1 bg1"></div>
							<div class="fl cent2">VIP中心</div>
							<div class="fr cent3">查看</div>
						</div>
						<div class="cent clearfix">
							<div class="fl cent1 bg2"></div>
							<div class="fl cent2">我的视频</div>
							<div class="fr cent3">高考真题随时看</div>
						</div>
						<div class="cent clearfix">
							<div class="fl cent1 bg3"></div>
							<div class="fl cent2">已学课程</div>
							<div class="fr cent3">今日已更新</div>
						</div>
						<div class="cent clearfix">
							<div class="fl cent1 bg4"></div>
							<div class="fl cent2">优惠券</div>
							<div class="fr cent3">优惠乐翻天</div>
						</div>
						<div class="cent clearfix centn">
							<div class="fl cent1 bg5"></div>
							<div class="fl cent2">我的图书馆</div>
						</div>
						<div class="cent clearfix">
							<div class="fl cent1 bg6"></div>
							<div class="fl cent2">我的收藏夹</div>
						</div>
						<div class="cent clearfix">
							<div class="fl cent1 bg7"></div>
							<div class="fl cent2">我的课程</div>
						</div>
					</div>

				</div>
			</div>
			<script src="js/jquery-3.2.1.js"></script>
			<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
			<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
			<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
			<script>
				$(start);

				function start() {
					//图标在每格中上下居中；
					var $imgtop = ($(".cent").height() / 2) - ($(".cent1").height() / 2);
					$(".cent1").css({
						"margin-top": $imgtop
					});
					//字体在每格中上下居中；
					var $fontsizetop = ($(".cent").height() / 2) - ($(".cent2").height() / 2);
					$(".cent2").css({
						"margin-top": $fontsizetop
					});
					var $fontsizetop1 = ($(".cent").height() / 2) - ($(".cent3").height() / 2);
					$(".cent3").css({
						"margin-top": $fontsizetop1
					});
					//页面跳转
					$(".cent").eq(1).click(
						function() {
							$(location).fadeIn().attr("href", "我的视频.html");
						}
					)
					$(".box .top .top_net").click(
						function() {
							$(location).fadeIn().attr("href", "我的账号.html");
						}
					)
					$(".box .cent:last-child").click(
						function() {
							$(location).fadeIn().attr("href", "三级页我的课程.html");
						}
					)
//					$(".bar>a:nth-of-type(2)").click(
//						function() {
//							$(location).fadeIn().attr("href", "1对1.html");
//						}
//					)
//					$(".bar>a:nth-of-type(3)").click(
//						function() {
//							$(location).fadeIn().attr("href", "拍照搜题.html");
//						}
//					)
//					$(".bar>a:nth-of-type(4)").click(
//						function() {
//							$(location).fadeIn().attr("href", "朋友圈.html");
//						}
//					)
				}
			</script>
	</body>

</html>